<template>
  <div class="box">
    <MyHeader title="购物车"></MyHeader>
    <GoodsList
      v-for="item in list"
      :key="item.id"
      :item="item"
      @Changed="ChangedFn"
      @changeCount="changeCountFn"
      @changeIpt="changeIptFn"
    ></GoodsList>
    <MyFooter :list="list" @checkAll="checkAllFn"></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import GoodsList from './components/GoodsList'
import MyFooter from './components/MyFooter'
import axios from 'axios'
export default {
  components: {
    MyHeader,
    GoodsList,
    MyFooter,
  },
  data() {
    return {
      list: [],
    }
  },
  methods: {
    ChangedFn(id) {
      const obj = this.list.find((item) => item.id === id)
      obj.goods_state = !obj.goods_state
    },
    checkAllFn(value) {
      this.list.forEach((item) => (item.goods_state = value))
    },
    changeCountFn(id, value) {
      this.list.find((item) => item.id === id).goods_count = value
    },
    changeIptFn(id, value) {
      this.list.find((item) => item.id === id).goods_count = value
    },
  },
  async created() {
    const res = await axios({
      method: 'get',
      url: 'https://www.escook.cn/api/cart',
    })
    console.log(res)
    const { status, list } = res.data
    if (status === 200) {
      this.list = list
    }
  },
}
</script>

<style lang="less" scoped>
.box {
  padding-top: 45px;
  padding-bottom: 50px;
}
</style>
